import React, { memo, useEffect } from "react"
import { shallowEqual, useDispatch, useSelector } from "react-redux"

import { HomeWrapper } from "./style"
import HomeBanner from "./c-cpns/home-banner"
import { fetchHomeDataAction } from "@/store/modules/home"
import HomeSectionV1 from "./c-cpns/home-sectionv1"
import HomeSectionV2 from "./c-cpns/home-sectionv2"
import { isEmptyO } from "@/utils"
import HomeLongfor from "./c-cpns/home-longfor"
import HomeSectionV3 from "./c-cpns/home-sectionv3"
import { changeHeaderConfigAction } from "@/store/modules/main"

// 主页
const Home = memo(() => {
  // shallowEqual 进行浅层比较，有数据发生改变才会更新
  const {
    goodPriceInfo,
    highScoreInfo,
    discountInfo,
    recommendInfo,
    longforInfo,
    plusInfo
  } = useSelector(
    (state) => ({
      goodPriceInfo: state.home.goodPriceInfo,
      highScoreInfo: state.home.highScoreInfo,
      discountInfo: state.home.discountInfo,
      recommendInfo: state.home.recommendInfo,
      longforInfo: state.home.longforInfo,
      plusInfo: state.home.plusInfo
    }),
    shallowEqual
  )

  const dispath = useDispatch()
  // 派发异步事件 发送网络请求
  useEffect(() => {
    dispath(fetchHomeDataAction())
    dispath(changeHeaderConfigAction({isFixed: true, topAlpha: true}))
  }, [dispath])

  return (
    <HomeWrapper>
      <HomeBanner />
      {/* <div className="content">
        <div className="good-price">
          <SectionHeader title={goodPriceInfo.title} />
          <SectionRooms goodPriceInfo={goodPriceInfo} />
        </div>
        <div className="high-score">
          <SectionHeader title={highScoreInfo.title} subtitle={highScoreInfo.subtitle} />
          <SectionRooms goodPriceInfo={highScoreInfo} />
        </div>
      </div> */}
      <div className="content">
        {isEmptyO(discountInfo) && <HomeSectionV2 dataInfo={discountInfo} />}
        {isEmptyO(recommendInfo) && <HomeSectionV2 dataInfo={recommendInfo} />}
        {isEmptyO(longforInfo) && <HomeLongfor dataInfo={longforInfo} />}
        {isEmptyO(goodPriceInfo) && <HomeSectionV1 dataInfo={goodPriceInfo} />}
        {isEmptyO(highScoreInfo) && <HomeSectionV1 dataInfo={highScoreInfo} />}
        {isEmptyO(plusInfo) && <HomeSectionV3 dataInfo={plusInfo}/>}
      </div>
    </HomeWrapper>
  )
})

export default Home
